<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微聚科技</title>
    <style>
        /* reset-css */
        body, dl, dd, ul, ol, h1, h2, h3, h4, h5, h6, p, form, header, section, article, footer, button {
            margin:0;
        }
        body, button, input, select, textarea {
            font:12px/1.5 tahoma, '\5FAE\8F6F\96C5\9ED1', sans-serif
        }
        h1, h2, h3, h4, h5, h6 {
            font-size:100%
        }
        em, b {
            font-style:normal
        }
        a {
            text-decoration:none
        }
        a:hover {
            text-decoration:none;
        }
        img, button, input {
            border:0
        }
        button, input, select, textarea {
            font-size:100%;
            outline:none
        }
        table {
            border-collapse:collapse;
            border-spacing:0
        }
        td, th, ul, ol, button, input {
            padding:0
        }
        li {
            list-style: none;
        }
        /* 公共样式 */
        body {
            min-width: 1200px;
            text-align: center;
            font-size: 16px;
            color: #5d5d5d;
        }
        .wrap {
            width: 1400px;
            margin: 0 auto;
        }
        .clear::after {
            content:'';
            display: block;
            height: 0;
            overflow: hidden;
            clear: both;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        .search-content {
            width: 100%;
            margin-top: 87px;
        }       
        .content-box {
            width: 264px;
        }
        .img-info {
            font-size: 14px;
            color: #5d5d5d;
            padding: 0 10px;
            margin-bottom: 35px;
        }
    </style>
</head>
<body>

	<!-- 搜索内容区-start -->
	<div class="main">
		<div class="wrap">
			<!-- 搜索内容 -->
			<p class="fr search-info">
				微聚已为您找到<strong class="result">216</strong>个相关结果
			</p>
			<div class="search-content" id="masonry">
				<div class="content-box">
					<a href="javascript:;">
						<img src="ossweb-img/img3.jpg" alt="">
					</a>
					<div class="img-info clear">
						<span class="fl game-name">QQ飞车</span>
						<span class="fr game-type">公测专题</span>
					</div>
				</div>
				<div class="content-box">
					<a href="javascript:;">
						<img src="ossweb-img/img2.jpg" alt="">
					</a>
					<div class="img-info clear">
						<span class="fl">QQ飞车</span>
						<span class="fr">公测专题</span>
					</div>
				</div>
				<div class="content-box">
					<a href="javascript:;">
						<img src="ossweb-img/img1.jpg" alt="">
					</a>
					<div class="img-info clear">
						<span class="fl">QQ飞车</span>
						<span class="fr">公测专题</span>
					</div>
				</div>
				<div class="content-box">
					<a href="javascript:;">
						<img src="ossweb-img/img4.jpg" alt="">
					</a>
					<div class="img-info clear">
						<span class="fl">QQ飞车</span>
						<span class="fr">公测专题</span>
					</div>
				</div>
				<div class="content-box">
					<a href="javascript:;">
						<img src="ossweb-img/img6.jpg" alt="">
					</a>
					<div class="img-info clear">
						<span class="fl">QQ飞车</span>
						<span class="fr">公测专题</span>
					</div>
				</div>
				<div class="content-box">
					<a href="javascript:;">
						<img src="ossweb-img/img5.jpg" alt="">
					</a>
					<div class="img-info clear">
						<span class="fl">QQ飞车</span>
						<span class="fr">公测专题</span>
					</div>
				</div>
			</div>
		</div>	
			<!-- 加载中 -->
			<p class="loading">
				<i class="loading-ico"></i>
				<span>加载中...</span>
			</p>
		</div>
	</div>
	<!-- 搜索内容区-end -->

	<script src="//ossweb-img.qq.com/images/js/jquery/jquery-1.11.3.min.js"></script>
	<!-- 瀑布流插件 -->
	<script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
	<!-- <script src="js/masonry.pkgd.min.js"></script> -->
	<script>
		// 测试数据
		var data = [
			{
				src: 'ossweb-img/img1.jpg'
			},
			{
				src: 'ossweb-img/img2.jpg'
			},
			{
				src: 'ossweb-img/img3.jpg'
			},
			{
				src: 'ossweb-img/img4.jpg'
			},
			{
				src: 'ossweb-img/img5.jpg'
			},
			{
				src: 'ossweb-img/img6.jpg'
			},
		];

		// 初始化瀑布流
		var $masonry = $('#masonry').masonry({
			itemSelector: '.content-box',
			columnWidth: '.content-box',
            gutter: 20
        });
        var len = $(".content-box").length;
		window.onscroll = function() {
            len = $(".content-box").length;
            var dataLen = data.length;
			if($(window).height()+ $(window).scrollTop() >= $(document).height()){
                var time= null;
                if(len<=dataLen){
                    console.log(len)
                    time = setTimeout(function() {
                        for (var i=0; i<data.length; i++) {
                            // 创建模拟数据，并添加到页面
                            var obox = $('<div class="content-box"></div>').appendTo('#masonry');
                            var $oImg = $('<a href="javascript:;"><img src="' + data[i].src + '"></a>').appendTo(obox);
                            var $oTxt = $('<div class="img-info clear"><span class="fl">QQ飞车</span><span class="fr">公测专题</span></div>').appendTo(obox);
                            $masonry.masonry('appended', obox);
                        }
                    }, 1000);
                }else{
                    clearTimeout(time);
                }
			}
		};

	</script>
</body>
</html>